<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>可翻页的表格</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }

        .pager {
            text-align: center;
            margin-top: 10px;
        }

        .pager a {
            display: inline-block;
            padding: 5px 10px;
            margin-right: 5px;
            text-decoration: none;
            border: 1px solid #ccc;
            background-color: #f2f2f2;
            color: #333;
        }

        .pager a.active {
            background-color: #ccc;
        }
        .hidden-column {
        display: none;
    }
    </style>
</head>
<body>
    <div id="table-container">
        <table id="data-table">
            <thead>
                <tr>
                    <th style="display:none;">编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <!-- 这里是动态生成的表格内容 -->
            </tbody>
        </table>
        <div id="pager" class="pager">
            <a href="javascript:void(0);" id="first-page">首页</a>
            <a href="javascript:void(0);" id="prev-page">上一页</a>
            <a href="javascript:void(0);" id="next-page">下一页</a>
            <a href="javascript:void(0);" id="last-page">末页</a>
            <span>当前第 <span id="current-page">1</span> 页，共 <span id="total-pages">1</span> 页</span>
            <span>每页显示 <select id="page-size">
                <option value="5">5</option>
                <option value="10">10</option>
                <option value="20">20</option>
                <option value="50">50</option>
                <option value="100">100</option>
            </select> 条记录</span>
        </div>
    </div>

    <script>
        var tableData = [
            { 编号: 1, 姓名: '张三', 年龄: 20 },
            { 编号: 2, 姓名: '李四', 年龄: 25 },
            { 编号: 3, 姓名: '王五', 年龄: 30 },
            { 编号: 4, 姓名: '赵六', 年龄: 35 },
            { 编号: 5, 姓名: '陈七', 年龄: 40 },
            { 编号: 6, 姓名: '刘八', 年龄: 45 },
            { 编号: 7, 姓名: '郑九', 年龄: 50 },
            { 编号: 8, 姓名: '黄十', 年龄: 55 },
            { 编号: 9, 姓名: '林十一', 年龄: 60 },
            { 编号: 10, 姓名: '韩十二', 年龄: 65 },
            { 编号: 11, 姓名: '杨十三', 年龄: 70 },
            { 编号: 12, 姓名: '罗十四', 年龄: 75 },
            { 编号: 13, 姓名: '洪十五', 年龄: 80 },
            { 编号: 14, 姓名: '曾十六', 年龄: 85 },
            { 编号: 15, 姓名: '谢十七', 年龄: 90 },
            { 编号: 16, 姓名: '梁十八', 年龄: 95 },
            { 编号: 17, 姓名: '叶十九', 年龄: 100 }
        ];

        var currentPage = 1;
        var pageSize = 5;

        function renderTable() {
            var table = document.getElementById('data-table');
            var tbody = table.getElementsByTagName('tbody')[0];
            tbody.innerHTML = '';

            var startIndex = (currentPage - 1) * pageSize;
            var endIndex = Math.min(startIndex + pageSize, tableData.length);

            for (var i = startIndex; i < endIndex; i++) {
                var row = document.createElement('tr');
                var rowData = tableData[i];

                for (var key in rowData) {
                    var cell = document.createElement('td');
                    if(key=='编号')
                    	 cell.className = 'hidden-column';
                    cell.textContent = rowData[key];
                    row.appendChild(cell);
                }

                tbody.appendChild(row);
            }
        }

        function renderPager() {
            var pager = document.getElementById('pager');
            var currentPageSpan = document.getElementById('current-page');
            var totalPageSpan = document.getElementById('total-pages');
            var firstPageLink = document.getElementById('first-page');
            var prevPageLink = document.getElementById('prev-page');
            var nextPageLink = document.getElementById('next-page');
            var lastPageLink = document.getElementById('last-page');

            var totalPages = Math.ceil(tableData.length / pageSize);
            currentPage = Math.min(currentPage, totalPages);
            currentPageSpan.textContent = currentPage;
            totalPageSpan.textContent = totalPages;

            if (currentPage === 1) {
                firstPageLink.style.display = 'none';
                prevPageLink.style.display = 'none';
            } else {
                firstPageLink.style.display = 'inline-block';
                prevPageLink.style.display = 'inline-block';
            }

            if (currentPage === totalPages) {
                nextPageLink.style.display = 'none';
                lastPageLink.style.display = 'none';
            } else {
                nextPageLink.style.display = 'inline-block';
                lastPageLink.style.display = 'inline-block';
            }
        }

        function updateTable() {
            renderTable();
            renderPager();
        }

        function onPageChange(page) {
            currentPage = page;
            updateTable();
        }

        function onPageSizeChange(size) {
            pageSize = size;
            currentPage = 1;
            updateTable();
        }

        var firstPageLink = document.getElementById('first-page');
        var prevPageLink = document.getElementById('prev-page');
        var nextPageLink = document.getElementById('next-page');
        var lastPageLink = document.getElementById('last-page');
        var pageSizeSelect = document.getElementById('page-size');

        firstPageLink.addEventListener('click', function () {
            onPageChange(1);
        });

        prevPageLink.addEventListener('click', function () {
            onPageChange(currentPage - 1);
        });

        nextPageLink.addEventListener('click', function () {
            onPageChange(currentPage + 1);
        });

        lastPageLink.addEventListener('click', function () {
            onPageChange(Math.ceil(tableData.length / pageSize));
        });

        pageSizeSelect.addEventListener('change', function () {
            onPageSizeChange(parseInt(pageSizeSelect.value));
        });

        updateTable();
    </script>
</body>
</html>
